<template>
    <HeaderButton v-if="noticeList.length === 0" :theme="props.theme" class="box-button">
        <BellOutlined />
    </HeaderButton>
    <a-popover v-else placement="bottomRight">
        <a-badge :offset="offset" dot :count="noticeList.length">
            <HeaderButton :theme="props.theme" class="box-button">
                <BellOutlined />
            </HeaderButton>
        </a-badge>
        <template #content>
            <a-list bordered :data-source="noticeList">
                <template #renderItem="{ item }">
                    <a-list-item class="notice-list">
                        <span class="title" @click="onNoticeClick(item)">{{ item.title }}</span>
                        <span class="time">{{ parseTime(item.createDate, 'YYYY-MM-DD') }}</span>
                    </a-list-item>
                </template>
            </a-list>
        </template>
    </a-popover>
    <modal ref="modalRef" @close="onClose" />
</template>
<script setup>
import { ref } from 'vue'
import { BellOutlined } from '@ant-design/icons-vue'
import HeaderButton from '/@/components/HeaderButton/index.vue'
import { getUnreadNotice } from '/@/api/Iframe/Notice'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios'
import Modal from './Modal.vue'

const props = defineProps({
    theme: {
        type: String
    }
})

const offset = [-2, 5]
const noticeList = ref([])
const modalRef = ref()

const onClose = () => {
    loadUnreadNotice()
}
const loadUnreadNotice = () => {
    getUnreadNotice().then(result => {
        if (result.code === SUCCESS_CODE) {
            if (result.data && result.data.length > 0) {
                noticeList.value = [...result.data]
            } else {
                noticeList.value = []
            }
        }
    })
}

const onNoticeClick = row => {
    modalRef.value.open(row)
}

loadUnreadNotice()
</script>
<style lang="less" scoped>
.box-button {
    height: 36px;
    line-height: 36px;
    margin: 4px 0;
}
.notice-list {
    cursor: pointer;
    .title {
        width: 200px;
    }
}
</style>
